<template>
  <view class="container">
    <view class="header">日报</view>
    <view class="date-picker">
      <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
        <view>{{ date }}</view>
      </picker>
    </view>
    <view class="data-list" :style="{height: itemHeight*(listAll.length) + 'px', position: 'relative'}">
		<view :style="{position: 'absolute', top: top + 'px'}">
			<view class="item" v-for="(item, index) in listAll" :key="index" @click="getclick(item)">
			  <image src="../../static/assets/img/quxian1.png" mode="aspectFill" class="item-image"></image>
			  {{ item }}
			</view>
		</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  // import Date1 from '@/components/DateChoose/DateChoose.vue'
  import { ref, onMounted } from 'vue';
  import { onPageScroll } from '@dcloudio/uni-app'
  import type {QueryEquipmentHistory,HRR} from'@/api/types'
  import { getEquipmentHistory } from '@/api/equipment/equipment';
  const listAll = ref<string[]>([]);
  const showList = ref<string[]>([]);
  const hrrList = ref<Array<HRR>>()
  const itemHeight = 105;
  const showNum = 10;
  const equipmentUUID = "618fb722-44ca-4f62-a89f-85d5ed5e84a2";//暂时先这样写
  let top = 0;
  let scrollTop = 0;
  let startIndex = 0;
  let endIndex = 0;
  
   onPageScroll((e) => { 
    scrollTop = e.scrollTop;
    getShowList(); 
    }) 
  const getAllList = () => {
    for (let i = 0; i < 100; i++) {
      listAll.value.push(`序号:${i}`+`心跳:80`+`呼吸:80`+`时间:2023/9/21 08:00:00`);
    }
  };
  
  const getShowList = () => {
    startIndex = Math.floor(scrollTop / itemHeight);
    endIndex = startIndex + showNum;
    showList.value = listAll.value.slice(startIndex, endIndex);
    // for(let i = 0; i < listAll.value.length; i++){
    //   console.log(listAll.value[i]);
    // }
    top = scrollTop - (scrollTop % itemHeight);
  };
  
  onMounted(() => {
    // getAllList();
    getShowList();
    bindDateChange({ detail: { value: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}` } })
  });
  //日期选择器
  const getDate = (type: 'start' | 'end' | 'format') => {
    const date = new Date();
  
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
  
    if (type === 'start') {
      year = year - 100;
    } else if (type === 'end') {
      year = year + 100;
    }
    month = month > 9 ? month : '0' + month;
    day = day > 9 ? day : '0' + day;
  
    return `${year}-${month}-${day}`;
  };
  
  const date = ref(getDate('format'));
  // const value1 = ref<[String, String]>([
  //   getDate('format'),
  //   getDate('format'),
  // ])
  const startDate = ref(getDate('start'));
  const endDate = ref(getDate('end'));
  
  const bindDateChange = async (e: { detail: { value: Date } }) => {
    date.value = e.detail.value;
    console.log(date.value)
    let startDate1 = new Date(e.detail.value);
    let date1 = new Date(startDate1.getTime()+24*3600*1000)
    const queryParm:QueryEquipmentHistory={
        startDate:new Date(e.detail.value),
        endDate:new Date(date1),
        equipmentUUID:equipmentUUID
    }
    console.log(queryParm.startDate);
    console.log(queryParm.startDate.getTime());
    // for (let i = 0; i < 20000; i++) {
    //   listAll.value[i] = (`序号:${i}`+`心跳:0`+`呼吸:0`+`时间:wu`);
    // }
    // startIndex = Math.floor(scrollTop / itemHeight);
    // endIndex = startIndex + showNum;
    // showList.value = listAll.value.slice(startIndex, endIndex);
    // top = scrollTop - (scrollTop % itemHeight);
    const res = await getEquipmentHistory(queryParm);
    console.log(res)
    if(res.code==200){
        console.log(res.data)
        hrrList.value = res.data.hrrList
        const length = hrrList.value?.length
        if(length===0){
          listAll.value = [];
        }
          for (let i = 0; i < length; i++) {
            listAll.value[i] = (`序号:${i}`+`心跳:${hrrList.value[i].heatbeat}`+`呼吸:${hrrList.value[i].breath}`+`时间:${hrrList.value[i].createTime}`);
            // console.log(listAll.value[i]);
          }
          // getShowList();
          // startIndex = Math.floor(scrollTop / itemHeight);
          // endIndex = startIndex + showNum;
          // showList.value = listAll.value.slice(startIndex, endIndex);
          // top = scrollTop - (scrollTop % itemHeight);
          
        // equipmentName.value=res.data.equipmentName
        // hrrList.value = res.data.hrrList
        // heartBeatArray = res.data.heatbeatList
        // breathArray = res.data.breathList
        // count =res.data.breathList.length
        // heartOption.series[0].data=heartBeatArray
        // breathOption.series[0].data=breathArray
        // myHeartsChart.value.setOption(heartOption)
        // myBreathsChart.value.setOption(breathOption)
    }
  };
  const getclick = (id : string) => {
    console.log(id)
    var index = id.indexOf("时间:")
    var result = id.slice(index+3)
    console.log(result)
    uni.navigateTo({
      url:'/pages/history/history?id=' + result
    })
  }
</script>

<style lang="scss">
.container {
  padding: 20px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.date-picker {
  margin-bottom: 20px;
}

// .data-list {
//   position: relative;
//   height: {{ itemHeight * listAll.length }}px;
// }

// .item {
//   position: absolute;
//   top: {{ top }}px;
//   display: flex;
//   align-items: center;
//   padding: 10px;
//   border-bottom: 1px solid #ccc;
// }

// .item-image {
//   height: 100px;
//   width: 100px;
//   margin-right: 10px;
// }
</style>
